<template>
  <mu-flex direction="column" style="height: 100%;">
    <!--头部-->
    <main-header :hasreturn="true" :empty="true" title="我的建议"/>

    <mu-flex fill class="full" ref="container">
      <div class="loadmore-content">
        <div class="empty" v-if="myAdvises.length <= 0">
          你还没提过建议
        </div>
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list style="padding: 5px 3px;">
            <template v-for="(ad, i) in myAdvises">
              <mu-paper :z-depth="2" style="margin-bottom: 5px" @click="changeAdviseDetails(i)">
                <mu-list-item button avatar style="padding: 8px 0;">
                  <mu-list-item-content>
                    <mu-list-item-title>{{ad.name}}</mu-list-item-title>
                    <mu-list-item-sub-title>{{ad.content}}</mu-list-item-sub-title>
                  </mu-list-item-content>
                  <mu-list-item-action>
                    <mu-badge></mu-badge>
                    <mu-list-item-after-text style="font-size: 10px;">{{advise.datetime}}</mu-list-item-after-text>
                  </mu-list-item-action>
                </mu-list-item>
              </mu-paper>
            </template>
          </mu-list>
        </mu-load-more>
      </div>
    </mu-flex>

    <mu-dialog :title="advise.name" width="90%" :open.sync="adviseDetails">
      <div slot="default">{{advise.content}}</div>
      <mu-flex fill slot="actions" justify-content="between" align-items="center">
        <span class="font12" style="padding-left: 16px;">{{advise.datetime}}</span>
        <mu-button small flat color="teal" @click="changeAdviseDetails()">关闭</mu-button>
      </mu-flex>
    </mu-dialog>
  </mu-flex>
</template>

<script>
  import MainHeader from '../components/MainHeader'
  import {mapMutations, mapState, mapActions} from 'vuex'

  export default {
    name: "MyAdvises",
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.showNav(false)
      })
    },
    beforeRouteLeave(to, from, next) {
      this.showNav(true);
      next()
    },
    components: {
      MainHeader
    },
    data() {
      return {
        refreshing: false,
        loading: false,
        adviseDetails: false,
        advise: {},
        page: 1
      }
    },
    computed: {
      ...mapState(['myAdvises'])
    },
    methods: {
      ...mapMutations(['showNav']),
      ...mapActions(['loadAdvise']),
      changeAdviseDetails(index) {
        if (index != null) {
          this.advise = this.myAdvises[index]
        }
        this.adviseDetails = !this.adviseDetails
      },
      refresh() {
        let self = this;
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        this.loadAdvise(1).then(()=> {
          self.refreshing = false
        })
      },
      load() {
        let self = this;
        this.loading = true;
        this.loadAdvise(++this.page).then(() => {
          self.loading = false
        })
      }
    },
    created () {
      this.loadAdvise(this.page)
    }
  }
</script>

<style scoped>
  .loadmore-content {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 56px);
    overflow: auto;
  }
</style>
